/**
 * 作者：陈文斌 on 2018/12/29.
 * 邮箱：chen_wennbin@163.com
 * 版本：v1.0
 */

import 'package:crm/constant/api.dart';
import 'package:flutter/material.dart';
import 'package:crm/constant/constant.dart';

class CaptchaDialog extends Dialog {
  final Function okCallback;
  final Function cancelCallback;

  CaptchaDialog({
    Key key,
    @required this.okCallback,
    @required this.cancelCallback,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency,
      child: CaptchaContent(
        okCallback: okCallback,
        cancelCallback: cancelCallback,
      ),
    );
  }
}

class CaptchaContent extends StatefulWidget {
  final Function okCallback;
  final Function cancelCallback;

  @override
  CaptchaContent({
    Key key,
    this.okCallback,
    this.cancelCallback,
  }) : super(key: key);

  State<StatefulWidget> createState() => _CaptchaContentState();
}

class _CaptchaContentState extends State<CaptchaContent> {
  String _captcha = '';

  @override
  Widget build(BuildContext context) {
    Widget captchaImage = Image.network(
      Api.VerifyCode,
      fit: BoxFit.fill,
    );

    _changeCaptcha() {
      print('更换图形验证码');
      setState(() {
        captchaImage = Image.network(
          Api.VerifyCode,
          fit: BoxFit.fill,
        );
      });
    }

    // 输入框管理器
    TextEditingController _captchaController = TextEditingController.fromValue(
      TextEditingValue(
        text: _captcha,
        selection: TextSelection.fromPosition(
          TextPosition(
              affinity: TextAffinity.downstream, offset: _captcha.length),
        ),
      ),
    );

    /// 标题部分
    Widget _titleSection() {
      return Container(
        margin: EdgeInsets.only(top: 20),
        child: Text(
          '请输入图形验证码',
          style: TextStyle(
            color: Color(0xFF232323),
            fontSize: AppFontSizes.Font17,
            fontFamily: AppFontFamilies.PingFangSC,
            fontWeight: FontWeight.w500,
          ),
        ),
      );
    }

    /// 输入框、图形验证码部分
    Widget _contentSection() {
      return Container(
        margin: EdgeInsets.fromLTRB(22, 15, 22, 0),
        height: 40,
        child: Row(
          children: <Widget>[
            Expanded(
              child: Container(
                height: 40,
                margin: EdgeInsets.only(right: 5),
                decoration: BoxDecoration(
                  border: Border.all(color: AppColors.LineColor),
                ),
                child: TextField(
                  controller: _captchaController,
                  style: TextStyle(
                    color: AppColors.TextColor,
                    fontSize: AppFontSizes.Font15,
                    fontFamily: AppFontFamilies.PingFangSC,
                    fontWeight: FontWeight.w500,
                  ),
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.all(9),
                    border: InputBorder.none,
                    hintStyle: TextStyle(
                      color: AppColors.PlaceholderTextColor,
                      fontSize: AppFontSizes.Font15,
                      fontFamily: AppFontFamilies.PingFangSC,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  textInputAction: TextInputAction.done,
                  onChanged: (str) {
                    _captcha = str;
                    print('当前captcha$_captcha');
                  },
                  onEditingComplete: () {
                    FocusScope.of(context).requestFocus(FocusNode());
                  },
                ),
              ),
            ),
            Container(
              width: 90,
              height: 40,
              decoration: BoxDecoration(
                color: AppColors.CommonButtonBGColor,
                borderRadius: BorderRadius.circular(4),
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(4),
                child: GestureDetector(
                  child: captchaImage,
                  onTap: _changeCaptcha,
                ),
              ),
            ),
          ],
        ),
      );
    }

    /// 按钮部分
    Widget _buttonSection() {
      return Container(
        height: 38,
        margin: EdgeInsets.only(top: 26),
        decoration: BoxDecoration(
          border: Border(
            top: BorderSide(
              color: AppColors.LineColor,
              width: 1,
            ),
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Expanded(
              child: ClipRRect(
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(10),
                ),
                child: MaterialButton(
                  onPressed: () {
                    if (widget.cancelCallback != null) {
                      widget.cancelCallback();
                    }
                  },
                  child: Text('取消'),
                  padding: EdgeInsets.all(0),
                ),
              ),
            ),
            Container(
              width: 1,
              height: 38,
              color: AppColors.LineColor,
            ),
            Expanded(
              child: ClipRRect(
                borderRadius: BorderRadius.only(
                  bottomRight: Radius.circular(10),
                ),
                child: MaterialButton(
                  onPressed: () {
                    if (widget.okCallback != null) {
                      widget.okCallback(_captcha);
                    }
                  },
                  child: Text('确定'),
                  padding: EdgeInsets.all(0),
                ),
              ),
            ),
          ],
        ),
      );
    }

    return Center(
      child: SizedBox(
        width: 270,
        height: 170,
        child: Container(
          decoration: ShapeDecoration(
            color: Color(0xFFFFFFFF),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              // 标题部分
              _titleSection(),
              // 输入框、图形验证码部分
              _contentSection(),
              // 按钮部分
              _buttonSection(),
            ],
          ),
        ),
      ),
    );
  }
}
